ZK JSF Components 2.0 Released
Jeff Liu, Engineer, Potix Corporation
Feb. 19, 2008
Applicable to zk-3.0.4-FL-2008-02-15 and later.
- Applicable to JSF 1.2
- Applicable to JSP 2.1
Introduction
JSF (JavaServer Faces), a technology for building user interfaces for JavaServer applications. ZK team has released the ZK JSF Components 1.0 for JSF 1.1 component. The latest version of JavaServer Faces technology is version 1.2, the final version of which has been released through the Java Community Process under JSR-252. You can download the 1.2 version of the specification from the JSR 252 web page. Due to some major changes in specification, unified expression language and etc., ZK team ports ZK JSF Components to JSF 1.2 and releases the ZK JSF Components 2.0.
ZK JSF Component 1.1
If you are not familiar with ZK JSF Component 1.0, please take a look the smalltalks " Enrich Your JSF Applications with ZK Today!"
Unified Expression Language
The primary new feature of JSP 2.1 is the unified expression language (unified EL), which represents a union of the expression language offered by JSP 2.0 and the expression language created for JavaServer Faces technology version 1.0. And, #{expr} is reserved as deferred evaluation expression. As a result, the #{expr} in JSF custom attribute is going to evaluated first than pass through verbatim. It will break the valuebinding in dynamic attribute.
EX:
...
The following valuebinding will not work in JSF 1.2 Specification
due to that the #{expr} in JSF custom attribute is going to evaluated first than pass through verbatim
<mycomp my:value="#{MyBean.value}" />
...
In "The Issue Regarding Unified Expression Language" from Sun, few methods to resolve this issue are explained. ZK team adapts those methods. Following is an example to demonstrate it.
- UserRegistration.jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://www.zkoss.org/jsf/zul" prefix="z"%>
<html>
<head>
<title>User Registration.jsp Form</title>
</head>
<body>
<f:view>
<h2>User Registration Form v2</h2>
<h:form id="userForm">
<h:messages id="userMessages" showDetail="true" layout="table" />
<z:page>
<z:window>
<z:grid width="800px">
<z:rows>
<z:row>
<z:label value="First Name" />
<z:textbox id="firstName" f:value="\#{UserRegistration.user.firstName}">
<f:validateLength minimum="2" maximum="25" />
</z:textbox>
<h:message
style="color: red; text-decoration: overline"
id="firstNameError"
for="firstName" />
</z:row>
<z:row>
<z:label value="Last Name" />
<z:textbox id="lastName" f:value="\#{UserRegistration.user.lastName}">
<f:validateLength minimum="2" maximum="25" />
</z:textbox>
<h:message
style="color: red; text-decoration: overline"
id="lastNameError"
for="lastName"/>
</z:row>
<z:row>
<z:label value="Age"/>
<z:textbox id="age" f:value="\#{UserRegistration.user.age}">
<f:converter converterId="javax.faces.Short"/>
<f:validateLongRange maximum="150" minimum="0"/>
</z:textbox>
<h:message
style="color: red; text-decoration: overline"
id="ageError"
for="age"/>
</z:row>
<z:row>
<z:label value="Zip Code" />
<z:textbox id="zipCode" f:value="\#{UserRegistration.user.zipCode}">
<f:validator validatorId="zipCodeValidator" />
<f:attribute name="plus4Optional" value="true" />
</z:textbox>
<h:message
style="color: red; text-decoration: overline"
id="zipCodeError"
for="zipCode" />
</z:row>
<z:row>
<z:label value="Email" />
<z:textbox id="email"
f:value="\#{UserRegistration.user.email}"
f:validator="\#{UserRegistration.validateEmail}" />
<h:message
style="color: red; text-decoration: overline"
id="emailError"
for="email"/>
</z:row>
<z:row>
<z:label value="Birth Date" />
<z:textbox id="birthDate" f:value="\#{UserRegistration.user.birthDate}" >
<f:convertDateTime pattern="MM/yyyy"/>
</z:textbox >
<h:message
style="color: red; text-decoration: overline"
id="birthDateError"
for="birthDate"/>
</z:row>
<z:row>
<z:label value = "phone" />
<z:textbox id="phone" f:value="\#{UserRegistration.user.phone}" >
<f:converter converterId="PhoneConverter" />
<f:validator validatorId="PhoneValidator"/>
</z:textbox>
<h:message
style="color: red; text-decoration: overline"
id="phoneError"
for="phone"/>
</z:row>
</z:rows>
</z:grid>
</z:window>
<z:button id="register" label="register" f:action="\#{UserRegistration.register}" />
</z:page>
</h:form>
</f:view>
</body>
</html>
You can escape the characters in the page, you use the "\" character as follows:
...
<z:label value="Email" />
<z:textbox id="email"
f:value="\#{UserRegistration.user.email}"
f:validator="\#{UserRegistration.validateEmail}" />
...
Or, you can configure the page with the page directive to either accept the #{ characters as String literals with the deferredSyntaxAllowedAsLiteral attribute:
- UserRegistration2.jsp
...
<%@page ... deferredSyntaxAllowedAsLiteral="true" %>
...
<z:label value="Email" />
<z:textbox id="email"
f:value="#{UserRegistration.user.email}"
f:validator="#{UserRegistration.validateEmail}" />
...
Download
Summary
JSF is UI Component technology for building user interfaces for JavaServer applications. Now we update ZK JSF Components which let you run ZK Components in JSF 1.2 runtime, providing you an alternate way to build rich UI on your web application. We hope you enjoy this new feature and post feedback if you have any suggestions to make it better!
| Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License. |